<!-- 券列表页面 -->
<template>
	<vaeModal ref='outModal' :mask='outmodal.mask'>
		<template v-slot:modalInner>
			<uniTransition :mode-class="transitionClass" :show="outmodal.transition">
				<view class="userModal">
					<image mode='widthFix' style="width: 100%;" src="../static/ic_value_add_quanyi.png"></image>
					<view class="flex-x-center titles" style="">复制需享受健康服务的被保险人权益码，开启服务</view>
					<view v-if="ticketCodeList.length > 0" class="ticketListBox">
					    <view v-for="(ticket, index) in ticketCodeList" :key="index" class="ticketItem">
					        <view class="title1">被保险人:</view>
					        <view class="">{{ ticket.ticketName }}</view>
					        <view class="">
					            <view class="title1">权益码:</view>
					            <view class="flex-x-between" >
					                <view class="" >{{ ticket.ticketCode }}</view>
					                <view class="btnBox fuBtn flex-x-y-center" @click="copyCouponCode(ticket.ticketCode)">复制</view>
					            </view>
					        </view>
							 <!-- 添加条形码显示 -->
							<img :src="barcodeSrc" class="barcode-img">
							<div class="Barcode">Barcode</div>
					    </view>
					</view>
					<view class="flex-x-center">
						<view @click="outClick" class="btnBox nextBtn flex-x-y-center">下一步</view>
					</view>
				</view>
			</uniTransition>
		</template>
	</vaeModal>
</template>

<script>
	import vaeModal from "@/components/vae-modal/vae-modal.vue";
	import uniTransition from "@/components/uni-transition/uni-transition.vue";
	export default {
		props: {
			companyType: {
				type: Number,
				default: 0,
			},
			ticketCodeList: {
			    type: Array,
			    default: () => []
			},
		},
		components: {
			vaeModal,
			uniTransition,
		},
		onLoad() {
			// console.log("ticket page onLoad...");
		},
		onShow() {
			// console.log("ticket page onshow...");
		},
		created() {
			// console.log("ticket page created...");

			// 处理条形码
			// this.processBarcodes();
			    
		},
		data() {
			return {
				outmodal: {
					visible: false,
					transition: false,
					mask: false,
				},
				transitionClass: ['zoom-in'],
				paretRefs: null,
				barcodeSrc:'',
			}
		},
		methods: {
			// 打开退出弹窗
			openoutmodal(paretRefs) {
			    this.outmodal.transition = true;
			    this.paretRefs = paretRefs;
			    paretRefs.$refs.outModal.open();
				// 打开弹窗时处理条形码
				if (this.ticketCodeList.length > 0) {
					this.processBarcodes();
				}
			    return paretRefs;
			},
			//复制权益吗
			copyCouponCode(code) {
				if (!code) {
				    uni.showToast({
						title: '权益码为空',
				    });
				    return
				}
			    uni.setClipboardData({
			        data: code,
			        success: () => {
			          uni.showToast({ 
			            title: '复制成功', 
			          });
			        },
				})
			},
			// 关闭退出弹窗
			closeoutModal() {
				this.outmodal.transition = false;
				this.paretRefs.$refs.outModal.close()
			},
			/** 点击券的回调 */
			outClick() {
				// console.log("companyType  1111:");
				// console.log("companyType:", this.companyType);
				// console.log("on ticket page, ticketCodeList:", this.ticketCodeList);
				// this.$emit("quanyiClick", {});
				// 关闭当前券列表
				this.closeoutModal();
				
				// window.open(xxx.targetAddress);
			},
			// 在方法中调用复制到剪贴板的操作
			copyTextToClipboard(text) {
			  uni.setClipboardData({
			    data: text,
			    success: function () {
			      // console.log('复制成功');
			      uni.showToast({
			        title: '复制成功',
			      });
			    },
			    fail: function () {
			    }
			  });
			},
			// 处理条形码
			processBarcodes() {
			    this.ticketCodeList.forEach(ticket => {
					// console.log("basecode64",ticket.barcodeBase64)
			        if (ticket.barcodeBase64) {
			            const byteString = atob(ticket.barcodeBase64); // 将Base64转换为二进制数据
			            const mimeString = 'image/png'; // 获取图片类型
			            const ab = new ArrayBuffer(byteString.length);
			            const ia = new Uint8Array(ab);
			            for (let i = 0; i < byteString.length; i++) {
			                ia[i] = byteString.charCodeAt(i);
			            }
			            const blob = new Blob([ab], { type: mimeString }); // 创建Blob对象
			            this.barcodeSrc = URL.createObjectURL(blob); // 使用URL.createObjectURL()方法生成图片src
			        }
			    });
			}
		}
	}
</script>

<style lang="less">
	@import url("../common/css/global.less");

	.userModal {
		width: 700rpx;
		border-radius: 25rpx;
		background: #fff;
		overflow: hidden;

		.titles {
			color: #666;
			font-size: 16px;
			margin: 20rpx;
		}
		.listBox{
			min-height: 300rpx;
			.itemBoxs{
				background: #F9F9F9;
				border-radius: 10px;
				border: 1px solid #EEEEEE;
				padding: 15px;
				margin: 14px;
				.title1{
					color: #999;
				}
			}
		}
		.btnBox{
			background: linear-gradient( 90deg, #FF7011 0%, #FFC359 100%);
			box-shadow: 0px 4px 8px 0px rgba(255,112,17,0.38);
			border-radius: 24px;
			color: #fff;
			
		}
		.fuBtn{
			width: 56px;
			padding: 10rpx 0;
		}
		.nextBtn{
			width: 180px;
			height: 40px;
			margin: 20px 0;
		}
		.barcode-img {
		        width: 200px;
				height: 100px;
		        margin-top: 10px;
				text-align: center;
		}
		.Barcode{
			margin-top: -5px;
			text-align: center;
			background-color: rgb(255, 255, 255);
		}

	}
</style>